import React from 'react';
import styles from './Switch.less';

interface ISwitch {
  checked: boolean;
  onChange: (e: React.ChangeEvent) => void;
  checkedColor?: string;
}

const Switch: React.FC<ISwitch> = props => {
  const { checked, onChange, checkedColor } = props;
  return (
    <div className={styles.switch}>
      <input
        checked={checked}
        onChange={onChange}
        id="switch"
        className={styles.switch_input}
        type="checkbox"
      />
      <label
        style={{ backgroundColor: checked ? checkedColor : undefined }}
        className={styles.switch_label}
        htmlFor="switch"
      >
        <span className={styles.switch_button} />
      </label>
    </div>
  );
};
Switch.defaultProps = {
  checkedColor: '#FF4E56',
};

export default Switch;
